<template>
  <div class="hzy_allocate">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/goods_manager' }">
        商品管理
      </el-breadcrumb-item>
      <el-breadcrumb-item> 门店调拨 </el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <el-row>
      <el-button type="primary" @click="openNewList">新建调拨</el-button>
      <el-button type="success" @click="Search">查询</el-button>
      <el-button type="info" @click="ExportReport">导出报表</el-button>
    </el-row>
    <!-- 门店调拨表格查询 -->
    <div class="hzy_search" v-show="isSearch">
      <el-form :inline="true" :model="Invoices" class="demo-form-inline">
        <el-form-item label="单据编号">
          <el-input
            placeholder="开始编号"
            v-model="Invoices.startNum"
          ></el-input>
        </el-form-item>
        <span class="hzy_zhi">至</span>
        <el-form-item>
          <el-input placeholder="结束编号" v-model="Invoices.endNum"></el-input>
        </el-form-item>
        <el-form-item label="商品类型">
          <el-select placeholder="商品类型" v-model="Invoices.type">
            <el-option label="区域一" value="区域一"></el-option>
            <el-option label="区域二" value="区域一"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单号" style="padding-left: 14px">
          <el-input placeholder="订单号" v-model="Invoices.orderNum"></el-input>
        </el-form-item>
        <el-form-item label="入库门店">
          <el-select placeholder="入库门店" v-model="Invoices.storage">
            <el-option label="区域一" value="区域一"></el-option>
            <el-option label="区域二" value="区域一"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="柜台名称">
          <el-select placeholder="柜台名称" v-model="Invoices.counterName">
            <el-option label="区域一" value="区域一"></el-option>
            <el-option label="区域二" value="区域一"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-form :inline="true" :model="Invoices" class="demo-form-inline">
        <el-form-item label="创单日期">
          <el-input
            placeholder="开始日期"
            v-model="Invoices.startTime"
          ></el-input>
        </el-form-item>
        <span class="hzy_zhi">至</span>
        <el-form-item>
          <el-input
            placeholder="结束日期"
            v-model="Invoices.endTime"
          ></el-input>
        </el-form-item>
        <el-form-item label="出库门店">
          <el-select placeholder="出库门店" v-model="Invoices.out">
            <el-option label="区域一" value="区域一"></el-option>
            <el-option label="区域二" value="区域一"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出库名称">
          <el-select placeholder="出库名称" v-model="Invoices.outName">
            <el-option label="区域一" value="区域一"></el-option>
            <el-option label="区域二" value="区域一"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创单人" style="padding-left: 14px">
          <el-input
            placeholder="创单人"
            v-model="Invoices.createPerson"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="onInquire"
            >确认查询</el-button
          >
          <el-button type="success" size="small" @click="Collapse"
            >收起</el-button
          >
          <el-button
            type="info"
            @click="ConfirmExport"
            v-show="isExport"
            size="small"
            >确认导出</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 门店调拨表格 -->
    <el-table :data="tableData" border style="width: 100%" show-summary>
      <el-table-column fixed prop="goodsId" label="行号" width="100">
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100">
      </el-table-column>
      <el-table-column prop="documentNum" label="单据编号" width="120">
      </el-table-column>
      <el-table-column prop="createDate" label="创建日期" width="120">
      </el-table-column>
      <el-table-column prop="outboundStore" label="出库门店" width="120">
      </el-table-column>
      <el-table-column prop="outboundCounter" label="出库柜台" width="120">
      </el-table-column>
      <el-table-column prop="inboundStore" label="入库门店" width="120">
      </el-table-column>
      <el-table-column prop="inboundcounter" label="入库柜台" width="120">
      </el-table-column>
      <el-table-column prop="category" label="商品类型" width="120">
      </el-table-column>
      <el-table-column prop="count" label="数量" width="100"> </el-table-column>
      <el-table-column prop="totalWeight" label="重量" width="100">
      </el-table-column>
      <el-table-column prop="totalPrice" label="成本" width="100">
      </el-table-column>
      <el-table-column prop="series" label="系数" width="100">
      </el-table-column>
      <el-table-column prop="LabelTotalPrice" label="标签金额" width="100">
      </el-table-column>
      <el-table-column prop="createPerson" label="创单人" width="100">
      </el-table-column>
      <el-table-column prop="approver" label="审批人" width="100">
      </el-table-column>
      <el-table-column prop="approvalDate" label="审批日期" width="120">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="290">
        <template slot-scope="scope">
          <el-button
            @click="ApprovalClick(scope.$index, scope.row)"
            style="margin-left: 10px; margin-bottom: 10px"
            size="mini"
            >审批</el-button
          >
          <el-button
            @click="searchClick(scope.$index, scope.row)"
            type="primary"
            size="mini"
            >查看</el-button
          >
          <el-button
            @click="editClick(scope.$index, scope.row)"
            type="success"
            size="mini"
            >编辑</el-button
          >
          <el-button
            @click="delClick(scope.$index, scope.row)"
            type="danger"
            size="mini"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="sizes, prev, pager, next"
      :total="totalCountNum"
    >
    </el-pagination>
    <ViewAllocateInfo
      :viewList="viewList"
      v-if="isShowViewAllocateInfo"
      :isShowViewAllocateInfo="isShowViewAllocateInfo"
      @closeDialog="closeDialog"
    />
    <EditAllocateInfo
      :viewList="viewList"
      v-if="isShowEditAllocateInfo"
      @closeEdit="closeEdit"
      :isShowEditAllocateInfo="isShowEditAllocateInfo"
    />
    <AddAllocateInfo
      v-if="isShowAddAllocateInfo"
      @closeAdd="closeAdd"
      :isShowAddAllocateInfo="isShowAddAllocateInfo"
    />
  </div>
</template>

<script>
import { getGoldList, getGoldTotal } from "@/http/StoresAllocateApi";
import ViewAllocateInfo from "@/components/AllocateSet/ViewAllocateInfo.vue";
import EditAllocateInfo from "@/components/AllocateSet/EditAllocateInfo.vue";
import AddAllocateInfo from "@/components/AllocateSet/AddAllocateInfo.vue";
export default {
  name: "StoreAllocate",
  components: {
    EditAllocateInfo,
    ViewAllocateInfo,
    AddAllocateInfo,
  },
  data() {
    return {
      tableData: [
        // 模拟调拨数据
        // {
        //   goodsId: "1",
        //   status: "已通过",
        //   documentNum: "GPR12A0001",
        //   createDate: "2017-11-29",
        //   outboundStore: "望京分店",
        //   outboundCounter: "素金类",
        //   inboundStore: "王府井分店",
        //   inboundcounter: "素金类",
        //   category: "素金类",
        //   count: "6",
        //   totalWeight: "45.7000",
        //   totalPrice: "17388.87",
        //   series: "0",
        //   LabelTotalPrice: "0",
        //   createPerson: "霍元甲",
        //   approver: "黄飞鸿",
        //   approvalDate: "2017-11-29",
        // },
      ],
      Invoices: {
        // 查询
        startNum: "",
        endNum: "",
        type: "",
        orderNum: "",
        out: "",
        outName: "",
        createPerson: "",
        storage: "",
        counterName: "",
        endTime: "",
        startTime: "",
      },
      viewList: {}, // 子组件数据对象
      currentPage: 1, // 当前页
      pageSize: 10, // 当前页面展示的数量
      totalCountNum: 0, // 页面总数量
      isSearch: false, // 查询状态
      isExport: false, // 导出报表状态
      isShowViewAllocateInfo: false, // 查看单个商品信息界面显示状态
      isShowEditAllocateInfo: false, // 编辑单个商品信息界面显示状态
      isShowAddAllocateInfo: false, // 新建调拨界面显示状态
      formLabelWidth: "100px",
    };
  },
  created() {
    // 实例化创建完成
    this.getInit(this.currentPage, this.pageSize);
  },
  methods: {
    ApprovalClick(index, row) {
      
      console.log(index, row);
      row.status = "已通过";
      console.log(row.status);
    },
    searchClick(index, row) {
      // 查看单个商品数据
      console.log(index, row);
      this.isShowViewAllocateInfo = true;
      this.viewList = row;
    },
    closeDialog() {
      // 关闭查看界面
      this.isShowViewAllocateInfo = false;
    },
    editClick(index, row) {
      // 编辑单个商品数据
      console.log(index, row);
      this.isShowEditAllocateInfo = true;
      this.viewList = row;
    },
    closeEdit() {
      // 关闭编辑界面
      this.isShowEditAllocateInfo = false;
    },
    openNewList() {
      //新建调拨界面
      this.isShowAddAllocateInfo = true;
    },
    closeAdd() {
      this.isShowAddAllocateInfo = false;
    },
    delClick(id) {
      // 删除列表数据
      console.log(id);
      this.$confirm("此操作将永久删除该数据, 是否继续?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.tableData.splice(id, 1);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSizeChange(pageSize) {
      // 每页展示的数量
      console.log("每页" + pageSize + "条");
    },
    handleCurrentChange(currentPage) {
      // 当前分页
      console.log("当前页:", currentPage);
      this.currentPage = currentPage;
      this.getInit(currentPage, this.pageSize);
    },
    getInit(currentPage, pageSize) {
      // 获取总数量
      getGoldTotal()
        .then((res) => {
          this.totalCountNum = res.data.data;
        })
        .catch((err) => {
          console.log("获取总数量失败：", err);
        });
      getGoldList(currentPage, pageSize)
        .then((res) => {
          this.tableData = res.data.data;
          console.log(this.tableData);
          let zhuangTai = this.tableData.map(function (elem) {
            return elem.status;
          });
          console.log(zhuangTai);
          for (let i = 0; i < zhuangTai.length; i++) {
            if (zhuangTai[i] == 0) {
              this.tableData[i].status = "已驳回";
            } else if (zhuangTai[i] == 1) {
              this.tableData[i].status = "已通过";
            } else if (zhuangTai[i] == 2) {
              this.tableData[i].status = "待审核";
            }
          }
        })
        .catch((err) => {
          console.log("获取总数量失败：", err);
        });
    },
    NewAllocate() {},
    onInquire() {
      console.log("Inquire");
    },
    Search() {
      // 查询
      this.isSearch = true;
      this.isExport = false;
    },
    ExportReport() {
      // 导出报表
      this.isSearch = true;
      this.isExport = true;
    },
    ConfirmExport() {
      //确认导出报表
    },
    Collapse() {
      // 收起
      this.isSearch = false;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/var";
.el-row {
  margin: 0 0 20px 20px;
}
.el-input,
.el-select {
  width: 115px;
}
.hzy_zhi {
  line-height: 40px;
  padding-right: 10px;
}
</style>
